<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/home-list-cir-rel.css" />
		<style type="text/css">
			body {
				background: #f5f5f5;
			}
			
			.mui-card {
				margin: 10px;
				padding-bottom: 20px;
				background: #fff;
				border: none;
				box-shadow: none;
			}
			
			#textarea {
				border: 0;
			}
			
			.mui-table-view-cell {
				width: 80px;
				height: 80px;
			}
			
			.mui-table-view-cell img.mui-media-object {
				width: 65px;
				height: 65px;
			}
			/*定位信息，问题分类区域*/
			
			ul li.mui-table-view-cell {
				width: 100%;
				height: 50px;
			}
			
			.mui-table-view {
				position: inherit;
			}
			
			.mui-row:before, .mui-row:after {
				display: none;
				content: ' ';
			}
			
			.relaease-location {
				margin: 20px 15px 7px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="mui-title"></h1>
			<a id="btnrelease" class="mui-pull-right" style="line-height: 44px;font-size: 14px;">发送</a>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="padding-bottom: 1px;">
				<textarea id="textarea" rows="3" placeholder="请输入你发布的文字"></textarea>
				<div class="mui-row" style="min-height: 80px;" id="mui-files">
					<!--<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg">
						<img class="mui-media-object" src="../images/shuijiao.jpg">
					</div>
					<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg">
						<img class="mui-media-object" src="../images/cbd.jpg">
					</div>
					<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg">
						<img class="mui-media-object" src="../images/muwu.jpg">
					</div>-->
					<div class="mui-table-view-cell mui-media mui-col-xs-2" id="btnAdd">
						<img class="mui-media-object" src="../images/people-add.png">
					</div>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="relaease-location">
					<span class="mui-icon mui-icon-location"></span> &nbsp;<label></label>
				</li>
				<li class="mui-table-view-cell" style="background: #f5f5f5; height: 30px;">
				</li>
			</ul>
		</div>
		</div>
	</body>

</html>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
	var category1Name = ''; //任务大类名称
	var category2Name = ''; //任务小类名称

	var category1Id = ''; //任务大类id
	var category2Id = ''; //任务小类id
	var files = []; //上次图片头像附件
	var locations;
	var address;
	var questionObj = {};
	var fpage;

	var lfs = null; // 保留上次选择图片列表

	mui.init();

	mui.plusReady(function() {
		plus.nativeUI.closeWaiting(); //这里监听页面是否加载完毕，完成后关闭等待框
		var self = plus.webview.currentWebview();
		var typeName = self.typeName;
		var herfType = self.herfType;
		if(herfType == '1') {
			/*任务入口*/
			category1Name = self.category1Name;
			category2Name = self.category2Name;
			category2Id = self.category2Id;
			category1Id = self.category1Id;
			if(category1Name != '') {
				$("#relaease-question label").text('');
				var htm = category1Name + '&nbsp;' + category2Name;
				$("#relaease-question label").html(htm);
				questionObj = {
					'id': category1Id,
					'name': category1Name,
					'cid': category2Id,
					'cname': category2Name
				}
			}
		}
		//document.getElementById('mui-title').innerText = typeName;

		plus.geolocation.getCurrentPosition(function(result) {
			//console.log('Geolocation\coords:' + JSON.stringify(result.coords) + 'Geolocation\nLatitude:' + result.coords.latitude + '\nLongitude:' + result.coords.longitude + '\nAltitude:' + result.coords.altitude);
			locations = result.coords.longitude + ',' + result.coords.latitude;
			//console.log(JSON.stringify(result.address));
			address = result.address.province + result.address.city + result.address.district + result.address.street; //获取地理坐标信息； 
			$("#relaease-location label").text(address);
		}, function(result) {
			address = '未知地址';
			$("#relaease-location label").text(address);
			console.log('Geolocation error: ' + result.message);
			locations = '104.023015,30.667278';
		}, {
			geocode: true,
			provider: 'amap'
		});

	});

	//	选择已上传的图片
	$(document).on('click', '#mui-files .mui-media-addimg img', function() {
		var tthis = $(this);
		mui.confirm('是否删除图片', function(e) {
			if(e.index == 0) {
				mui.toast('已删除');
				tthis.parent().remove();
			}
		});

	});

	//	添加图片
	mui('body').on('tap', '#btnAdd', function() {

		var num = $("#mui-files .mui-media-addimg").length == undefined ? 9 : (9 - $("#mui-files .mui-media-addimg").length);
		//console.log('已选图片数量：' + num);
		if($("#mui-files .mui-media-addimg").length == 9) {
			plus.nativeUI.alert('最多只能选择9张图片');
			return;
		}

		if(mui.os.plus) {

			var upts = [{
					title: "拍照"
				},
				{
					title: "从手机相册选择"
				}
			];

			plus.nativeUI.actionSheet({
				title: "发布工作圈动态图片",
				cancel: "取消",
				buttons: upts
			}, function(opps) {
				switch(opps.index) {
					case 0:
						break;
					case 1:
						getImage();
						break;
					case 2:
						galleryImages(num);
						break;
					default:
						break
				}
			})
		}

		//	单张图片选择并上传，加载很慢;优化为多张上传，点击发送才能上传服务器
		/*jczw.upload('image', function(result) {
			//console.log($("#mui-files").html());
			//console.log(JSON.stringify(result));
			var html = '<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg" data-path="' + result[0].relativePath + '">' +
				'<img class="mui-media-object" src="' + result[0].localPath + '">' +
				'</div>';

			if(!$("#mui-files").children().hasClass('mui-media-addimg')) {
				$("#mui-files").append(html);
			} else {
				$("#mui-files").find('.mui-media-addimg').last().after(html);
			}
		});*/
	});

	//	使用手机拍照
	function getImage() {
		var camera = plus.camera.getCamera(); //获取手机摄像头对象
		var res = camera.supportedImageResolutions[0];
		var fmt = camera.supportedImageFormats[0];

		//调用拍照操作
		camera.captureImage(function(path) {
			//保存到本地相册
			plus.gallery.save(path, function(r) {
				var html = '<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg" data-path="' + r.file + '">' +
					'<img class="mui-media-object" src="' + r.file + '"></div>';
				if(!$("#mui-files").children().hasClass('mui-media-addimg')) {
					$("#mui-files").prepend(html);
				} else {
					$("#mui-files").find('.mui-media-addimg').last().after(html);
				}

			}, function(err) {
				// Handle camera error
				var code = error.code; // 错误编码
				var message = error.message; // 错误描述信息
			}, {
				resolution: res,
				format: fmt
			});

		})
	}

	//	从相册中选择图片 (单张/多张)
	function galleryImages(num) {

		plus.gallery.pick(function(event) {
			var files = event.files;

			lfs = files;

			var html = '';
			if(files.length > 0) {
				for(var i in files) {
					html += '<div class="mui-table-view-cell mui-media mui-col-xs-3 mui-media-addimg" data-path="' + files[i] + '">' +
						'<img class="mui-media-object" src="' + files[i] + '"></div>';
				}
			}

			//$("#mui-files").find('.mui-media-addimg').siblings().remove(); //删除之前添加图片内容 ，加上//selected: lfs, //仅在多图片选择时生效，相册选择界面将选中指定的图片路径列表。 如果指定的路径无效，则忽略此项；如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。

			if(!$("#mui-files").children().hasClass('mui-media-addimg')) {
				$("#mui-files").prepend(html);
			} else {
				$("#mui-files").find('.mui-media-addimg').last().after(html);
			}

			/*var files = event.files;
			console.log('图片路径地址:' + files.length);*/
		}, function(err) {
			var code = err.code; // 错误编码
			var message = err.message; // 错误描述信息
			//console.log("取消选择图片");
			console.log("错误编码:" + code);
			console.log('错误描述信息:' + message);
		}, { //文件过滤，只能筛选图片文件(支持多选) onmaxed: (Function 类型 )超过最多选择图片数量事件
			filter: 'image',
			multiple: true,
			maximum: num,
			system: false,
			//selected: lfs, //仅在多图片选择时生效，相册选择界面将选中指定的图片路径列表。 如果指定的路径无效，则忽略此项；如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。
			onmaxed: function() {
				plus.nativeUI.alert('最多只能选择' + num + '张图片');
			}
		})
	}

	//	发布工作圈动态
	mui('body').on('tap', '#btnrelease', function() {

		var words = $.trim($("#textarea").val());

		if(words == '' && $("#mui-files .mui-media-addimg").length == 0) {
			mui.toast('请上传图片或者输入文字');
			return;
		}

		mui.toast('发布工作圈成功');
		mui.back();
		return;

		/*if(address == undefined) {
			mui.toast('当前地址不能为空');
			return;
		}

		if(locations == undefined) {
			mui.toast('当前定位坐标不能为空');
			return;
		}*/

		//console.log('图片数：' + $("#mui-files .mui-media-addimg").length);
		var tempfiles = {
			files: ''
		}
		files = [];
		if($("#mui-files .mui-media-addimg").length > 0) {
			for(var i = 0; i < $("#mui-files .mui-media-addimg").length; i++) {
				files.push($("#mui-files .mui-media-addimg")[i].getAttribute('data-path'));
			}
			tempfiles.files = files;
		}
		console.log('tempfiles:' + JSON.stringify(tempfiles));
		if(files.length > 0) {
			wait = plus.nativeUI.showWaiting("图片上传中...");
			jczw.uploads(tempfiles, function(result) {
				console.log('result:' + JSON.stringify(result));
				wait.close();
				if(typeof(result) == 'object') {
					filesPath = [];
					if(result.length > 0) {
						for(var i = 0; i < result.length; i++) {
							filesPath.push(result[i].relativePath);
						}
					}
					console.log('filesPath:' + JSON.stringify(filesPath));
					jczw.workCircle.send(words, locations, address, category1Id, category2Id, filesPath, function(result) {
						if(result) {
							wait = plus.nativeUI.showWaiting("发布中...");
							setTimeout(function() {
								var page = plus.webview.currentWebview().opener();
								mui.fire(page, 'workcirclerefresh');
								setTimeout(function() {
										wait.close();
										mui.back();
									},
									1000);
								mui.toast('发布工作圈成功');
							}, 500)
						}
					})
				}
			});

		} else {
			jczw.workCircle.send(words, locations, address, category1Id, category2Id, files, function(result) {
				if(result) {
					wait = plus.nativeUI.showWaiting("发布中...");
					setTimeout(function() {
						var page = plus.webview.currentWebview().opener();
						mui.fire(page, 'workcirclerefresh');
						setTimeout(function() {
								wait.close();
								mui.back();
							},
							1000);
						mui.toast('发布工作圈成功');
					}, 500)
				}
			})
		}
	});
</script>